<template>
  <div>
      <v-title vtitle="BasicCharts"></v-title>
      <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card class="box-chart">
                    <barChart></barChart>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12">
                <el-card class="box-chart">
                    <pieChart></pieChart>
                </el-card>
            </el-col>
            
      </el-row>
      <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
                <el-card class="box-chart">
                    <scatterChart></scatterChart>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
                <el-card class="box-chart">
                    <lineChart></lineChart>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="8">
                <el-card class="box-chart">
                    <dataSetChart></dataSetChart>
                </el-card>
            </el-col>
      </el-row>
  </div>
</template>
<script>
import vTitle from "../common/PageTitle.vue";
import barChart from '../charts/BarChart.vue';
import pieChart from '../charts/PieChart.vue';
import scatterChart from '../charts/Scatter.vue';
import lineChart from '../charts/LineChart.vue';
import dataSetChart from '../charts/DataSetChart.vue';

export default {
  components:{
    vTitle,barChart,pieChart,scatterChart,lineChart,dataSetChart
  },
  data() {
      return{
          
      }
  }
}
</script>

<style scoped>
  .el-col {
  margin-bottom: 16px;
  text-align: center;
}
</style>

